<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="areaCode">
        <RegionSelect
          v-model="list.filter.areaCode"
          :props="{
            checkStrictly: true
          }"
        />
      </el-form-item>
      <el-form-item prop="scenicId">
        <KiSelect
          v-model="list.filter.scenicId"
          placeholder="输入景区名称搜索"
          :search="
            scenicName =>
              new Promise(resolve => {
                $POST('sot-admin-api/scenic/listForSelect', {
                  scenicName
                }).then(({ data }) => {
                  resolve(data)
                })
              })
          "
          :options.sync="options.scenic"
          :props="{ value: 'scenicId', label: 'scenicName' }"
        />
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="姓名" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="endDate" label="下单日期：">
        <TimeRangePicker
          :start.sync="list.filter.beginDate"
          :end.sync="list.filter.endDate"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item prop="reservationEndDate" label="预约日期：">
        <TimeRangePicker
          :start.sync="list.filter.reservationBeginDate"
          :end.sync="list.filter.reservationEndDate"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button @click="reset">重置</el-button>
    </el-form>

    <div class="table-operation">
      <span>
        <span style="margin-right: 32px;font-weight: bold">
          预约总人数：{{ reservationTotal }}
        </span>
        <ExportExcel
          url="/sot-admin-api/reservation/reservation-record/downloadReportList"
          :param="list.filter"
        />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-tabs type="border-card" v-model="status__">
      <el-tab-pane
        v-for="(v, i) of [
          { dataValue: 'all', dataName: '全部' },
          ...dict.reservation_status
        ]"
        :key="i"
        :label="v.dataName"
        :name="v.dataValue"
      >
        <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
          <el-table-column label="所属地区" prop="areaName" />
          <el-table-column label="景区名称" prop="scenicName" />
          <el-table-column label="姓名" prop="name" />
          <el-table-column label="证件类型" prop="certificateType" />
          <el-table-column label="证件号码" prop="certificateCode" />
          <el-table-column label="手机号码" prop="phone" />
          <el-table-column label="老人/小孩数量" prop="carryNum" />
          <el-table-column label="预约日期" prop="reservationDate" />
          <el-table-column label="场次时间">
            <template slot-scope="{ row }">
              {{
                row.beginTime &&
                  row.endTime &&
                  row.beginTime + ' - ' + row.endTime
              }}
            </template>
          </el-table-column>
          <el-table-column label="核销时间" prop="consumerDateTime" />
          <el-table-column label="下单时间" prop="createTime" />
          <el-table-column label="订单状态" prop="statusName" />
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row: { id } }">
              <KiPopButton
                v-if="hasBtn['查看']"
                @click="r({ id })"
              >
                查看
              </KiPopButton>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <UnivariateTable title="预约单信息">
        <tr>
          <td>所属地区</td>
          <td>{{ form.data.areaName }}</td>
          <td>景区名称</td>
          <td>{{ form.data.scenicName }}</td>
        </tr>
        <tr>
          <td>预约人姓名</td>
          <td>{{ form.data.name }}</td>
          <td>证件类型</td>
          <td>{{ form.data.certificateType }}</td>
        </tr>
        <tr>
          <td>个人证件号</td>
          <td>{{ form.data.certificateCode }}</td>
          <td>本人手机号</td>
          <td>{{ form.data.phone }}</td>
        </tr>
        <tr>
          <td>老人/小孩数量</td>
          <td>{{ form.data.carryNum }}</td>
          <td>预约日期</td>
          <td>{{ form.data.reservationDate }}</td>
        </tr>
        <tr>
          <td>场次时间</td>
          <td>
            {{
              form.data.beginTime &&
                form.data.endTime &&
                form.data.beginTime + ' - ' + form.data.endTime
            }}
          </td>
          <td>状态</td>
          <td>{{ form.data.statusName }}</td>
        </tr>
        <tr>
          <td>下单时间</td>
          <td>{{ form.data.createTime }}</td>
          <td>核销时间</td>
          <td>{{ form.data.consumerDateTime }}</td>
        </tr>
      </UnivariateTable>

      <h2>老人/小孩信息</h2>
      <el-table stripe :data="form.data.carryLst" border fit>
        <el-table-column label="姓名" prop="carryName" />
        <el-table-column label="证件类型" prop="carryCertificateType" />
        <el-table-column label="证件号" prop="carryCertificateCode" />
      </el-table>

      <h2>变更信息</h2>
      <el-table stripe :data="form.data.changeLst" border fit>
        <el-table-column label="变更状态" prop="changeMsg" />
        <el-table-column label="变更时间" prop="changeTime" />
        <el-table-column label="操作人" prop="changeUser" />
      </el-table>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import dayjs from 'dayjs'

export default {
  mixins: [pageMixin],
  watch: {
    status__ (newVal) {
      this.list.filter.status = newVal === 'all' ? null : newVal
      this.queryReservationTotal()
      this.getList()
    },
    'list.filter' () {
      this.queryReservationTotal()
    }
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/reservation/reservation-record',
    }, {
      initialListFilter() {
        return {
          beginDate: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
          endDate: dayjs().format('YYYY-MM-DD'),
        }
      }
    }),
  data () {
    return {
      reservationTotal: null,
      status__: 'all',
      scenicList: [],
      options: {
        scenic: []
      }
    }
  },
  methods: {
    queryReservationTotal () {
      this.reservationTotal = null
      this.$POST(
        'sot-admin-api/reservation/reservation-record/queryReservationTotal',
        this.list.filter
      ).then(res => {
        this.reservationTotal = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
h2:not(:first-child) {
  margin-top: 40px;
}
</style>
